<%@ include file="../common/top.jsp"%>
<div class="crumb">
  <div class="w">
    <div class="crumb-content">
      <a href="#" class="link">MyStore</a>
    </div>
  </div>
</div>

<div class="w panel">
  <div id="Welcome">
    <div id="WelcomeContent">
      <c:if test="${sessionScope.loginAccount != null }">
        Welcome ${sessionScope.loginAccount.firstName}!
      </c:if>
    </div>
  </div>

  <div id="Main">
    <div id="Sidebar">
      <div id="SidebarContent">
        <a href="categoryForm?categoryId=FISH"><img src="images/fish_icon.gif"/></a>
        <br />
        Saltwater, Freshwater
        <br />
        <a href="categoryForm?categoryId=DOGS"><img src="images/dogs_icon.gif" /></a>
        <br />
        Various Breeds
        <br />
        <a href="categoryForm?categoryId=CATS"><img src="images/cats_icon.gif" /></a>
        <br />
        Various Breeds, Exotic Varieties
        <br />
        <a href="categoryForm?categoryId=REPTILES"><img src="images/reptiles_icon.gif" /></a>
        <br />
        Lizards, Turtles, Snakes
        <br />
        <a href="categoryForm?categoryId=BIRDS"><img src="images/birds_icon.gif"/></a>
        <br />
        Exotic Varieties
      </div>
    </div>

    <div id="inform" style="display: none"></div>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/mouseEvent.js"></script>

    <div id="ShowBox">
      <div class="container">

      </div>
    </div>
    <div id="MainImage">


      <div id="MainImageContent">

        <map name="estoremap" id="productShow">
          <%--          categoryForm?categoryId=BIRDS--%>
          <area alt="Birds" coords="72,2,280,250"
                href="#" shape="RECT"
                data-categoryid="Birds" class="categoryItem"/>
          <area alt="Fish" coords="2,180,72,250"
                href="#" shape="RECT"
                data-categoryid="Fish" class="categoryItem"/>
          <area alt="Dogs" coords="60,250,130,320"
                href="#" shape="RECT"
                data-categoryid="Dogs" class="categoryItem"/>
          <area alt="Reptiles" coords="140,270,210,340"
                href="#" shape="RECT"
                data-categoryid="Reptiles" class="categoryItem"/>
          <area alt="Cats" coords="225,240,295,310"
                href="#" shape="RECT"
                data-categoryid="Cats" class="categoryItem"/>
          <area alt="Birds" coords="280,180,350,250"
                href="#" shape="RECT"
                data-categoryid="Birds" class="categoryItem"/>
        </map>
        <img height="355" src="images/splash.gif" align="middle"
             usemap="#estoremap" width="350" />
      </div>
    </div>

    <div id="Separator">&nbsp;</div>
  </div>
</div>
<%@ include file="../common/bottom.jsp"%>
